<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>录制本地桌面</title>
</head>
<body>
<table>
    <tr>
        <td><video autoplay playsinline id="video_player"></video></td>
        <td><video autoplay playsinline id="record_video_player"></video></td>
    </tr>
</table>
<button id="record">开始录制</button>
<button id="play" disabled>播放</button>
<button id="download" disabled>下载到本地</button>
<script src="./js/record_desktop.js"></script>
<script>
    'use strict'

    var videoPlayer = document.querySelector("video#video_player");
    var recordVideoPlayer = document.querySelector("video#record_video_player");
    var btRecord = document.querySelector("button#record");
    var btPlay = document.querySelector("button#play");
    var btDownload = document.querySelector("button#download");

    var dataBuffer;
    var mediaRecorder;

    function HandleError(err) {
        console.log(err.name + "," + err.message);
    }

    function GetMediaStream(mediaStream) {
        videoPlayer.srcObject = mediaStream;
        //两个video同步播放
        recordVideoPlayer.srcObject = mediaStream;
        window.stream = mediaStream;
    }

    function HandleDataAvailable(event) {
        if (event && event.data && event.data.size > 0) {
            dataBuffer.push(event.data);
        }
    }

    function StartRecord() {
        var options = {
            mimeType : 'video/webm;codecs=h264'
        };
        dataBuffer = [];

        if (!MediaRecorder.isTypeSupported(options.mimeType)) {
            console.error(`${options.mimeType} is not supported!`);
            return;
        }

        try {
            mediaRecorder = new MediaRecorder(window.stream, options);
        } catch (err) {
            console.error('Fail to new MediaRecorder!');
            return;
        }
        mediaRecorder.ondataavailable = HandleDataAvailable;
        mediaRecorder.start();
    }

    function StopRecord() {
        mediaRecorder.stop();
    }

    if (!navigator.mediaDevices || !navigator.mediaDevices.getDisplayMedia) {
        console.log('getDisplayMedia is not supported!');
    } else {
        var constraints = {
            video : {
                frameRate   : 24,
                width       : 640,
                height      : 480
            }
        };
        navigator.mediaDevices.getDisplayMedia(constraints)
            .then(GetMediaStream)
            .catch(HandleError);
    }

    btRecord.onclick = () => {
        if (btRecord.textContent === "开始录制") {
            StartRecord();
            btRecord.textContent = "结束录制";
            btPlay.disabled = true;
            btDownload.disabled = true;
        } else if (btRecord.textContent === "结束录制") {
            StopRecord();
            btRecord.textContent = "开始录制";
            btPlay.disabled = false;
            btDownload.disabled = false;
        }
    }

    btPlay.onclick = () => {
        var blob = new Blob(dataBuffer, {type : 'video/webm'});
        recordVideoPlayer.src = window.URL.createObjectURL(blob);
        recordVideoPlayer.srcObject = null;
        recordVideoPlayer.controls = true;
        recordVideoPlayer.play();
    }

    btDownload.onclick = () => {
        var blob = new Blob(dataBuffer, {type : 'video/webm'});
        var url = window.URL.createObjectURL(blob);
        var a = document.createElement('a');
        a.href = url;
        a.style.display = 'none';
        a.download = 'video.webm';
        a.click();
    }
</script>
</body>
</html>